<html>

<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="example">
        <my-component></my-component>
    </div>
    <div id="example-2">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
    <div id="prop-example-2">
        <input v-model="parentMsg">
        <br>
        <child :my-message="parentMsg"></child>
    </div>
</body>
<script>
    //1 一个全局组件注册的例子
    // 注册
    Vue.component('my-component', {
        template: '<div>A custom component!</div>'
    })

    // 创建根实例
    new Vue({
        el: '#example'
    })

    var data = {
        counter: 0
    }

    //2 data必须返回函数
    Vue.component('simple-counter', {
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
        // 但是我们却给每个组件实例返回了同一个对象的引用
        data: function () {
            return {
                counter: 0 //返回对象而不是对象的引用
            }
        }
    })

    new Vue({
        el: '#example-2'
    })

    Vue.component('child', {
        // 在 JavaScript 中使用 camelCase
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'//字符串模板没有大小写限制，驼峰和中横线可以互用
    })

    new Vue({
        el: '#prop-example-2',
        data: {
            parentMsg: 'Message from parent'
        }
    })

    /*
    * 在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
    */
</script>

</html>